<template>
  <div class="aui-card-list">
    <uni-list-query-card :queryShow="queryShow" @query-click="getDataList()" @click="(e)=>{this.queryShow=e}">
      <el-col :span="6">
        <el-form-item :label="$t('dict.dictName')">
          <el-input v-model="dataForm.dictName" :placeholder="$t('dict.dictName')" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item :label="$t('dict.dictType')">
          <el-input v-model="dataForm.dictType" :placeholder="$t('dict.dictType')" clearable></el-input>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="6">
        <el-form-item label="第一行啊啊啊">
          <el-input v-model="dataForm.dictType" :placeholder="$t('dict.dictType')" clearable></el-input>
        </el-form-item>
      </el-col>
      <template v-slot:other>
        <el-col :span="6">
          <el-form-item label="折叠条件1">
            <el-input v-model="dataForm.dictType" :placeholder="$t('dict.dictType')" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="折叠条件2">
            <el-input v-model="dataForm.dictType" :placeholder="$t('dict.dictType')" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="条件3">
            <el-input v-model="dataForm.dictType" :placeholder="$t('dict.dictType')" clearable></el-input>
          </el-form-item>
        </el-col>
      </template> -->
    </uni-list-query-card>
    <el-card shadow="never" class="aui-card-list-body">
      <vxe-toolbar setting>
        <template v-slot:buttons>
          <el-button v-if="
              $hasPermission('sys:sysdicttype:save') &&
              $store.state.user.superAdmin === 1
            " type="primary" @click="addOrUpdateHandle()">
            {{ $t('add') }}
          </el-button>
          <el-button v-if="
              $hasPermission('sys:sysdicttype:delete') &&
              $store.state.user.superAdmin === 1
            " type="danger" @click="deleteHandle()">
            {{ $t('deleteBatch') }}
          </el-button>
        </template>
        <template v-slot:tools>
          <!-- <el-button icon="el-icon-search" @click="searchShowHandle()" circle></el-button> -->
          <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
          <!-- <el-button icon="el-icon-download" @click="$refs.xTable.openExport()" circle></el-button> -->
        </template>
      </vxe-toolbar>
      <div class="aui-card-list-body-table">
        <!-- header-align="left" border="default" align="left" :max-height="tableHeight2" -->
        <vxe-table ref="xTable" :loading="dataListLoading" :data="dataList" auto-resize class="vxe-table-element" @select-change="dataListSelectionChangeHandleVex" highlight-hover-row @select-all="dataListSelectionAllChangeHandleVex" max-height="auto">
          <vxe-table-column type="checkbox" width="50" align="center"></vxe-table-column>
          <vxe-table-column field="dictName" title="dict.dictName"></vxe-table-column>
          <vxe-table-column field="dictType" title="dict.dictType">
            <template slot-scope="scope">
              <el-button type="text" @click="gotoDictData(scope.row)">{{
              scope.row.dictType
            }}</el-button>
            </template>
          </vxe-table-column>
          <vxe-table-column field="isSys" title="dict.isSys" width="80" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.isSys == 0" size="small" type="info">{{
              $t('dict.isSys0')
            }}</el-tag>
              <el-tag v-else size="small" type="success">{{
              $t('dict.isSys1')
            }}</el-tag>
            </template>
          </vxe-table-column>
          <vxe-table-column field="status" title="dict.state" width="80" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 0" size="small" type="danger">{{
              $t('dict.status0')
            }}</el-tag>
              <el-tag v-else size="small" type="success">{{
              $t('dict.status1')
            }}</el-tag>
            </template>
          </vxe-table-column>
          <vxe-table-column title="handle" width="120" v-if="$store.state.user.superAdmin === 1">
            <template slot-scope="scope" align="center">
              <el-button v-if="$hasPermission('sys:sysdicttype:update')" type="text" icon="el-icon-edit" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}
              </el-button>
              <el-button v-if="$hasPermission('sys:sysdicttype:delete')" type="text" icon="el-icon-delete" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}
              </el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
        </el-pagination>
      </div>
    </el-card>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './dicttype-add-or-update'
import { moduleRoutes } from '@/router'

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      switchVal: true,

      mixinViewModuleOptions: {
        // queryHeight: 112,
        getDataListURL: '/sys/sysdicttype/page',
        getDataListIsPage: true,
        deleteURL: '/sys/sysdicttype',
        deleteIsBatch: true
      },
      // headLock: false,

      dataForm: {
        id: '',
        dictType: '',
        dictName: ''
      }
    }
  },
  watch: {

  },
  methods: {
    gotoDictData (dictType) {
      // 组装路由名称, 并判断是否已添加, 如是: 则直接跳转
      var name = 'sys-dictdata'
      var routeName = name + `__${dictType.id}`
      var route = window.SITE_CONFIG['dynamicRoutes'].filter(item => item.name === routeName)[0]
      if (route) {
        return this.$router.push({ name: routeName, params: { 'dictType': dictType } })
      }
      // 否则: 添加并全局变量保存, 再跳转
      route = {
        path: 'sys-dicttype' + `__${dictType.id}`,
        component: () => import(`@/views/modules/sys/dictdata`),
        name: routeName,
        meta: {
          ...window.SITE_CONFIG['contentTabDefault'],
          menuId: this.$route.meta.menuId,
          title: `${this.$route.meta.title} - ${dictType.dictType}`
        }
      }
      this.$router.addRoutes([
        {
          ...moduleRoutes,
          name: `main-dynamic__${route.name}`,
          children: [route]
        }
      ])
      window.SITE_CONFIG['dynamicRoutes'].push(route)
      this.$router.push({ name: route.name, params: { 'dictType': dictType } })
    }
  },
  components: {
    AddOrUpdate
  }
}
</script>
